<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name=”renderer” content=”webkit|ie-comp|ie-stand” />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Expires" content="0">
    <title>食品溯源追溯服务管理平台</title>
    <link href="favicon.ico" type="image/x-icon" rel="icon">
    <link type="text/css" rel="stylesheet" href="/css/traceability/core.css">
    <link type="text/css" rel="stylesheet" href="/css/traceability/home.css">
</head>
<body>
<header id="pc-header">
    <%--<div class="header">
        <div class="header-w clearfix">
            <form>
                <button>搜索</button>
                <input type="text" placeholder="请输入相关的关键词...">
            </form>
        </div>
    </div>--%>
    <div class="pc-header">
        <div class="pc-define">
            <a  href="index.html" target="_blank" class="pc-symbol"><%--<img src="/img/icon/logo.png" title="食品溯源追溯服务管理平台">--%></a>
            <ul>
                <li><a  href="/traceability/index" class="current">首页</a></li>
                <li><a href="about.html">新闻资讯</a></li>
                <li><a href="bird.html">食品溯源</a></li>
                <%--<li><a href="register.html">境外注册</a></li>--%>
                <li><a href="certification.html">产品认证</a></li>
                <li><a href="about.html">关于我们</a></li>
                <%--<li><a href="distribute.html">诚信经销</a></li>--%>
            </ul>
            <div class="pc-chunks">
               <dl class="select">
                   <dt>用户登录</dt>
                   <dd style="display:none">
                       <div class="pc-eject">
                           <div class="pc-shells clearfix">
                               <h3>系统登录</h3>
                               <a href="index.html" target="_blank">忘记密码？</a>
                           </div>
                           <div class="pc-frame">
                               <form>
                                   <p><input type="text" placeholder="请输入您的用户名" name=""></p>
                                   <p><input type="text" placeholder="请输入您的密码" name=""></p>
                                   <p class="clearfix"><span><input type="text" placeholder="请输入验证码" name=""></span><span><img src="/img/icon/yzm.png" width="85" height="37" title="" align=""></span></p>
                                   <p><button>用户登录</button></p>
                                   <p><a href="index.html" target="_blank">企业注册</a></p>
                               </form>
                           </div>
                       </div>
                   </dd>
               </dl>
            </div>
        </div>
    </div>
</header>

<section id="pc-banner">
        <div class="bannerbox">
            <div class="pc-define pc-search">
                <form>
                    <input type="text" id="trace-input" placeholder="请输入22溯源码">
                    <a href="javascript:;" id="trace-now">立即追溯</a>

                </form>
            </div>
            <div class="nav">
                <dl>
                    <dd class=""></dd>
                    <dd class=""></dd>
                    <dd class=""></dd>
                    <dd class=""></dd>
                </dl>
            </div>
            <ul>
                <li class="fst-li"></li>
                <li class="sec-li"></li>
                <li class="third-li"></li>
                <li class="noe-li"></li>
            </ul>
        </div>
</section>

<section id="pc-news">
    <div class="pc-domain">
        <div class="pc-figure"><img src="/img/bg/ico.png" ></div>
        <div class="pc-trends">
            <div class="pc-minute">
                <h2>最新动态</h2>
                <a href="index.html">查看更多</a>
            </div>
            <div class="pc-publish clearfix">
                <dl class="clearfix">
                    <dt><img src="/img/pd/ad1.png" width="126" height="74" title=""></dt>
                    <dd class="title"><a href="new-list.html" target="_blank" title="广东盏王食品溯源诚信经销声明" about="">在共享经济时代下，食品追溯平台可以做的不止是防范</a></dd>
                    <dd class="remark">当今经济发展已经擂响了共享经济时代的鼓点，以迅雷不及掩耳之势席卷而来的共享单车、共享充电宝以及共享电单车等等......</dd>
                </dl>
                <dl>
                    <dt><img src="/img/pd/ad2.png" width="126" height="74" title=""></dt>
                    <dd class="title"><a href="new-list.html" target="_blank" title="诚信经销，为您提供放心食品溯源" about="">诚信经销，为您提供放心食品溯源</a></dd>
                    <dd class="remark">共享经济行业发展的时间不长，但在短时间内已经快速地渗透到了很多行业和细分市场。......</dd>
                </dl>
            </div>
        </div>
    </div>
</section>
<section id="pc-nest">
    <div class="pc-edible">
        <%--<div class="pc-source">
            <div class="pc-title">
                <h1>您可以通过以下方式食品溯源产品信息</h1>
            </div>
            <div class="pc-traces"></div>
        </div>--%>
        <!-- begin-->
        <div class="soft_function">
            <div class="pc-means">
                <h2>通过查询</h2>
                <h3>你将得到如下相关信息</h3>
            </div>
            <div class="soft_con_icon">
                <ul>
                    <li><a id="pic_fun_adm" href="javascript:void(0);"><img src="/img/icon/icon1.png" width="98" height="98"/><p style="color:#17bc78">产品信息</p></a></li>
                    <li><a id="pic_fun_crm" href="javascript:void(0);"><img  src="/img/icon/icon2.png" width="98" height="98"/><p>生产商信息</p></a></li>
                    <li><a id="pic_fun_project" href="javascript:void(0);"><img  src="/img/icon/icon3.png" width="98" height="98"/><p>经销商信息</p></a></li>
                    <li><a id="pic_fun_k" href="javascript:void(0);"><img  src="/img/icon/icon4.png" width="98" height="98"/><p>通关信息</p></a></li>
                </ul>
            </div>
            <div class="soft_con1" style="background:url(/img/bg/line1.png);"></div>
            <div class="soft_con">
                <div id="xzgl" class="soft_con2">
                    <p><em>在这里:</em>为您提供：消费者只需要通过带摄像头的手机拍摄二维码，就能查询到产品的相关信息，查询的记录都会保留在系统内，一旦产品需要召回就可以直接发送短信给消费者。</p>
                </div>
                <div id="crm" class="soft_con2" style="display:none">
                    <p><em>在这里:</em>为您提供：食品的溯源产地是哪里，消费者只需要通过带摄像头的手机拍摄二维码，就能查询到产品的相关信息，查询的记录都会保留在系统内，一旦产品需要召回就可以直接发送短信给消费者</p>
                </div>
                <div id="xmgl" class="soft_con2" style="display:none">
                    <p><em>在这里:</em>为您提供：食品的经销商是哪里的。消费者只需要通过带摄像头的手机拍摄二维码，就能查询到产品的相关信息，查询的记录都会保留在系统内，一旦产品需要召回就可以直接发送短信给消费者</p>
                </div>
                <div id="zsgl" class="soft_con2" style="display:none">
                    <p><em>在这里:</em>为您提供：食品是国产的还是进口的，如果是进口，会有显示海关的信息，消费者只需要通过带摄像头的手机拍摄二维码，就能查询到产品的相关信息，查询的记录都会保留在系统内，一旦产品需要召回就可以直接发送短信给消费者</p>
                </div>
            </div>
        </div>
        <!-- End -->
    </div>
</section>

<%--
<section id="pc-region">
    <div class="pc-region">
        <div class="pc-module">
            <div class="green"><a href="new.html" target="_blank">新闻专区</a> </div>
            <div class="blue"><a href="data.html" target="_blank">资料专区</a> </div>
            <div class="orange"><a href="download.html" target="_blank">下载专区</a> </div>
        </div>
    </div>
</section>
--%>

<footer id="pc-footer">
    <div class="pc-layer">
        <div class="pc-attach"> <p class="copyright"><%--Copyright© 2018&nbsp;&nbsp;All Rights Reserved&nbsp;&nbsp;--%><a href="index.html" target="_blank" style="color:#fff;">仲恺农业工程学院109实验室</a></p> </div>
    </div>
</footer>

<script type="text/javascript" src="/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/js/traceability/banner.js"></script>
<script type="text/javascript" src="/js/traceability/top.js"></script>
<script type="text/javascript">

    //溯源
    $("#trace-now").click(function () {
        var traceNumber = $("#trace-input").val();
        console.log(traceNumber);
        location.href = '/traceability/trace-result?traceNumber=' + traceNumber;
    });

    $(function(){
        $(".soft_con_icon ul li a").mouseover(function(){
            var id = $(this).attr("id");
            var x=$(this).parent().index();
            $(this).children("p").css({"color":"#17bc78"}).parent().parent().siblings().children().children("p").css({"color":"#333333"});
            var src1=id+"_hover.gif"
            $(".soft_con_icon ul li a").each(function(index, element) {

            });
            if(x==0){
                $("#xzgl").css({"display":"block"}).siblings().css({"display":"none"});
                $(".soft_con1").css({"background":" url(/img/bg/line1.png)"});
            }else if(x==1){
                $("#crm").css({"display":"block"}).siblings().css({"display":"none"});
                $(".soft_con1").css({"background":"url(/img/bg/line2.png)"});
            }else if(x==2){
                $("#xmgl").css({"display":"block"}).siblings().css({"display":"none"});
                $(".soft_con1").css({"background":"url(/img/bg/line3.png)"});
            }else if(x==3){
                $("#zsgl").css({"display":"block"}).siblings().css({"display":"none"});
                $(".soft_con1").css({"background":"url(/img/bg/line4.png)"});
            }
        });//通过查询 切换
    });

    $(function(){
        $(".smore").click(function(){
            $(".pc-surface").show();
        });
        $(".pc-surface").click(function(){
            $(".pc-surface").hide();
        });
    });//脚部浮层1

    $(function(){
        $(".smore1").click(function(){
            $(".pc-surface1").show();
        });
        $(".pc-surface1").click(function(){
            $(".pc-surface1").hide();
        });
    });//脚部浮层2

    $(function(){
        $(".smore2").click(function(){
            $(".pc-surface2").show();
        });
        $(".pc-surface2").click(function(){
            $(".pc-surface2").hide();
        });
    });//脚部浮层4

    $(function(){
        $(".smore3").click(function(){
            $(".pc-surface3").show();
        });
        $(".pc-surface3").click(function(){
            $(".pc-surface3").hide();
        });
    });//脚部浮层3

    $(function(){
        $(".select").each(function(){
            var s=$(this);
            var z=parseInt(s.css("z-index"));
            var dt=$(this).children("dt");
            var dd=$(this).children("dd");
            var _show=function(){dd.slideDown(300);dt.addClass("cur");s.css("z-index",z+1);};   //展开效果
            var _hide=function(){dd.slideUp(300);dt.removeClass("cur");s.css("z-index",z);};    //关闭效果
            dt.click(function(){dd.is(":hidden")?_show():_hide();});
            $("body").click(function(i){ !$(i.target).parents(".select").first().is(s) ? _hide():"";});
        })
    });//用户登录
</script>


</body>
</html>